<template>
  <ga-comment class="itpm_style">
    <template #author>
      <span >{{ !isProgress? author : author + ' '+ unit }}</span>
    </template>
    <template #avatar>
      <!-- <ga-avatar>啊</ga-avatar> -->
      <SvgIcon :icon-class="icon" :style="{ fontSize: fontSize }" />
    </template>
    <template #content>
      <ga-progress
        v-if="isProgress"
        stroke-width="8"
        style="width: 78px"
        :show-text="false"
        :steps="5"
        :status="status(author)"
        :percent="0.5"
      />
      <div v-else>{{ content }}</div>
    </template>
  </ga-comment>
</template>

<script setup>
import SvgIcon from '@/components/SvgIcon'
import { defineEmits, defineProps, warn } from 'vue'
defineProps({
  author: {
    required: true,
    default: '网络安全事件与日志管理系统'
  },
  content: {
    required: true,
    default: '网络安全事件与日志管理系统'
  },
  icon: {
    required: true,
    default: 'zuhu'
  },
  unit: {
    required: true,
    default: 'GB'
  },
  fontSize: {
    required: false,
    default: '24px'
  },
  isProgress: {
    required: false,
    default: false
  }
})
const status = (val) => {
  console.log('val', val)
  switch (val) {
    case 1111:
      return 'success'
      break
    case 2222:
      return 'warning'
      break
    case 3333:
      return 'danger'
      break
    default:
      break
  }
}
const emits = defineEmits(['handleClickLink'])
const ClickLink = () => {
  emits('handleClickLink')
}
</script>

<style lang="scss" scoped>
.itpm_style {
  :deep(.garco-comment-avatar) {
    margin-right: 4px;
  }
  :deep(.garco-comment-author) {
    color: #2c4068;
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
  }
  :deep(.garco-comment-content) {
    font-size: 12px;
    font-weight: 400;
    line-height: 22px;
    color: #2c406899;
  }
}
</style>
